<template>
      <el-button type="primary" size="default" @click="emit('changeShowState',1)" icon="ele-Plus">添加SPU</el-button>
    <!-- card body -->
    <el-table  border stripe style="margin-top:20px" :data="SpulaypageList">
      <el-table-column type="index" width="80" label="序号" align="center"/>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row,$index}">
          <el-button
          type="primary"
          size="small"
          @click="emit('changeShowState',2,row)"
          title="添加SKU"
          icon="ele-Plus"
        ></el-button>
        <el-button
          type="primary"
          size="small"
          @click="emit('changeShowState',1,row)"
          title="编辑SPU"
          icon="ele-Edit"
        ></el-button>
        <el-button
          type="info"
          size="small"
          @click="ViewSpu(row)"
          title="查看SKU"
          icon="ele-Warning"
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="deleteSpu(row)"
          title="删除SPU"
          icon="ele-Delete"
        ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
        v-model:page-size="limit" 
        v-model:current-page="page" 
        :pager-count="5" 
        small 
        background
        :page-sizes="[5, 10, 12, 15 ]" 
        layout="prev, pager, next,sizes" 
        :total="total" 
        class="mt-4" />
    <!-- 查看sku列表对话框 -->
      <el-dialog
                v-model="dialogTableVisible"
                title="sku列表"
                >
          <el-table :data="skuList">
              <!-- property对应的就是prop -->
              <el-table-column label="名称" prop="skuName" />
              <el-table-column label="价格" prop="price" />
              <el-table-column label="重量" prop="weight" />
              <el-table-column label="默认图片">
                  <template v-slot="{ row, $index }">
                    <el-image :src="row.skuDefaultImg"></el-image>
                  </template>
              </el-table-column>
          </el-table>
      </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
import { requestFindBySpuId, type SkuInfoListType } from "@/api/sku";


export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref ,watch} from "vue";
//引入小菠萝
import useAttrStore from "@/stores/attr";
import {storeToRefs} from 'pinia'

//引入类型和api
import { requestDeleteSpu, requestSpuList, type SpuInfoType } from "@/api/spu";

// 拿到小菠萝的实例
const AttrStore = useAttrStore()
//获取需要的数据
const {category3Id} = storeToRefs(AttrStore)

//分页列表的数据创建
const page = ref(1)
const limit = ref(5)
const total = ref(0)
//获取自定义事件，传切换列表的数据
const emit = defineEmits<{
  (event:'changeShowState',val:number,row?:SpuInfoType):void;
}>()

// 创建一个值接收请求的获取数据
const SpulaypageList = ref<SpuInfoType[]>([])

//请求数据
const getSpulaypageList = async()=>{
  try{
    const re = await requestSpuList(page.value,limit.value,category3Id.value as number)
    SpulaypageList.value = re.records
    total.value = re.total
    // console.log(total.value);
    
  }catch(e){
    ElMessage.error('请求分页失败')
  }
}

watch([category3Id,page,limit],()=>{
  //当3id存在时才能发送请求
  if(category3Id.value){
    getSpulaypageList()
  }else{
    //当选择其他的id时  
    SpulaypageList.value=[]
    //请空页码
    total.value =0
  }
},{immediate:true})

//删除某个spu
const deleteSpu = async(row:SpuInfoType)=>{
  try{
    await requestDeleteSpu(row.id as number)
    ElMessage.success('删除成功')
    getSpulaypageList()
  }catch(e){
    ElMessage.error('删除失败')
  }
}

//根据id获取sku列表弹窗
const skuList = ref<SkuInfoListType>([]);
let dialogTableVisible = ref(false)

const ViewSpu = async(row:SpuInfoType)=>{
  dialogTableVisible.value = true

  try{
    //点击时获取id发请求
    const re = await requestFindBySpuId(row.id as number)
    // console.log(re)
    skuList.value = re
  }catch(e){
    ElMessage.error('查看信息失败')
  }
}

</script>
